<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本资料</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/layuicmspublic.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
		<style>
			.layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
	</head>
	<body>
		<form class="layui-form layui-row" method="post" id="dataFrm" lay-filter="dataFilter">
			<div class="layui-col-md3 layui-col-xs12 user_right">
				<div class="layui-upload-list userFace">
					<img class="layui-upload-img layui-circle userFaceBtn userAvatar" id="userFace" name="imgpath">
					<p id="resultText"></p>
				</div>
				<button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i class="layui-icon">&#xe67c;</i>掐指一算，我要换一个头像了</button>
			</div>

			<div class="layui-col-md6 layui-col-xs12">
				<div class="layui-form-item">
					<label class="layui-form-label">管理账号</label>
					<div class="layui-input-block">
						<input type="text" value="" id="loginname" name="loginname" disabled class="layui-input layui-disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="hidden" class="id" name="id">
						<input type="text" value="" id="name" name="name" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">用户地址</label>
					<div class="layui-input-block">
						<input type="text" value="" id="address" name="address" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">个人备注</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入个人备注" name="remark" class="layui-textarea myself"></textarea>
					</div>
				</div>
				<div class="layui-form-item" pane="">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block userSex">
						<input type="radio" name="sex" value="1" title="男" checked="">
						<input type="radio" name="sex" value="0" title="女">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="saveBtn">立即提交</button>
						<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
					</div>
				</div>
			</div>
		</form>


		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'layuimini', 'upload'], function() {
				var form = layui.form,
					layer = layui.layer,
					layuimini = layui.layuimini,
					upload = layui.upload;


				//查询当前用户
				$.get(api + "user/getCurrentUser", function(res) {
					form.val("dataFilter", res.data);
					$(".userAvatar").attr("src", baseUrl + res.data.imgpath);
				});

				form.on("submit(saveBtn)", function(data) {
					//loading层
					var index = layer.load(1, {
						shade: [0.5, '#fff'] //0.1透明度的白色背景     RGB  red  green blue
					});
					var params = $("#dataFrm").serialize();
					$.post(api + "user/updateUser", params, function(res) {
						layer.msg(res.msg);
						layer.close(index);
					})
					return false;
				})


				//绑定文件上传的控件
				//普通图片上传
				var uploadInst = upload.render({
					elem: '.userFaceBtn',
					url: api + 'file/doUpload',
					field: "mf", //设定文件域的字段名	

					acceptMime: 'image/*',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							// alert(result);
							$('#userFace').attr('src', result); //图片链接（base64）
						});
					},
					done: function(res) {
						//如果上传失败
						if (res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
						$(".userAvatar").attr("src", res.data.src);
					},
					error: function() {
						//演示失败状态，并实现重传
						var resultText = $('#resultText');
						resultText.html(
							'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						resultText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
				});


			});
		</script>
	</body>
</html>
